<!DOCTYPE html>
<html>
<!--
Reference:
  https://github.com/jussi-kalliokoski/audiolib.js/wiki/Tutorials%3A-Synthesizing-a-Song
  http://freespace.virgin.net/hugo.elias/models/m_perlin.htm
-->
<head>
  <title>AudioLib Test</title>
  
        <!-- debugging helpers -->
		<script src="audiolib.min.js" type="text/javascript"></script>
		<script src="SimplexNoise.js" type="text/javascript"></script>
		<script src="NoiseConverter.js" type="text/javascript"></script>
        <script type="text/javascript">
                // do not use
                function sleep(delay) {
                        var start = new Date().getTime();
                        while (new Date().getTime() < start + delay);
                }
                // use!
                function echo(line, string) {
                        document.getElementById("debugEcho"+line).textContent = string;
                }
        </script>
        <script src="audiolib.min.js" type="text/javascript"></script>
		<script src="Audio.js" type="text/javascript"></script>
		<script src="AudioLibImpl.js" type="text/javascript"></script>

</head>
<body>
  <div style="margin-bottom:20px">
    <span>Press the button to start the system.</span><br/>
    <input type="button" value="Start" onclick="javascript:startSystem();" />
  </div>
  <div style="margin-bottom:20px">
        <div><span>Press F5 to stop the system.</span></div>
  </div>
  <div style="margin-bottom:20px">
        <span>Output:</span>
        <ul style="margin-top:0">
                <li>Function Value: <span id="theValue">none</span></li>
                <li>Noised Value: <span id="theNoise">none</span></li>
				<li>MIDI Value: <span id="theMIDI">none</span></li>
                <li>Frequency: <span id="theFreq">none</span></li>
        </ul>
  </div>
  <div style="margin-bottom:20px">
    <span>Select a noise algorithm:</span><br/>
        <!--
        <input name="noiseSelect" type="radio" value="0" onclick="javascript:audioNoise.setNoiseGenerator(0);" />
        <span>Constant Noise</span><br/>
        -->
        <input checked="true" name="noiseSelect" type="radio" value="1" onclick="javascript:audioNoise.setNoiseGenerator(1);" />
        <span>White Noise</span><br/>
        <input name="noiseSelect"type="radio" value="2" onclick="javascript:audioNoise.setNoiseGenerator(2);" />
        <span>Perlin 1D</span><br/>
  </div>
  <div style="margin-bottom:20px">
    <span>Extended Debug Output:</span>
        <ul style="margin-top:0">
                <li>Debug Line 1: <span id="debugEcho1">none</span></li>
                <li>Debug Line 2: <span id="debugEcho2">none</span></li>
                <li>Debug Line 3: <span id="debugEcho3">none</span></li>
                <li>Debug Line 4: <span id="debugEcho4">none</span></li>
                <li>Debug Line 5: <span id="debugEcho5">none</span></li>
                <li>Debug Line 6: <span id="debugEcho6">none</span></li>
                <li>Debug Line 7: <span id="debugEcho7">none</span></li>
                <li>Debug Line 8: <span id="debugEcho8">none</span></li>
        </ul>
  </div>
  
</body>
</html>